<?php
    $sql = "SELECT ci_path,ci_id,ci_position FROM course_img WHERE cd_id=4 ORDER BY ci_position";
    $result = $db->Execute($sql);
    $i = 1;
    $j = 1;
    $course_img = '';
    $SITEURL = $iniVars['Locations']['siteurl'];
    while (!$result->EOF)
    {
        $course_img .= <<<sdl
            <li id="slideOrder_{$i}">
                <div class="courseImgList">
                    <img src="images/ajax-loader.gif" class="ajax_load_img delete_indicator"/>
                    <img src="{$SITEURL}{$result->fields['ci_path']}" class="courseImgThumb" />
                    <p>
                        <a href="javascript:void(0);" id="{$result->fields['ci_id']}" class="aLink deleteImg">Delete</a>
                    </p>
                </div>
                <span class="hiddenEle" id="imgOderNew"><p>{$result->fields['ci_id']}</p></span>
            </li>
sdl;
        ++$i;
        $j++;
        $lastPos = $result->fields['ci_position'];
        $result->MoveNext();
    }
    $result->Close();
    $courseImgImgInput = '';
    for($i;$i<4;$i++)
    {
        $courseImgImgInput .= '<p style="margin-bottom:10px;"><input name="courseImgImgVar[]" type="file" class="input medium" id="courseImgImgVar" /></p>';
    }
?>

<script type="text/javascript" src="js/jquery.dragsort-0.3.10.min.js"></script>
<script type="text/javascript">
    $(function() {
        $("#tabs").tabs();
    });
    
    $(document).ready(function(){
        
        var inputEle = <?php echo $j; ?>;
        if(inputEle<4)
        {
            $('.submitImgBt').css('display','block');
        }
        
        $('.submitImgBt').click(function(){
            $("#img_success_msg").css('display','none');
            $("#img_error_msg").css('display','none');
            $('.img_submit_indicator').css('display','inline');
            $('#courseImgFrm').attr('method','post');
            $('#courseImgFrm').attr('target','ajaxIfrm');
            $('#courseImgFrm').submit();
        });
        
         $("#courseImgList").dragsort({ dragSelector: "div", dragEnd: saveOrder, dragBetween: true, placeHolderTemplate: "<li class='courseImgPlaceHolder'><div></div></li>" });
        
        $(".deleteImg").click(function(){
            if(confirm('Delete image?'))
            {
                var thisLi = $(this);
                thisLi.parents(".courseImgList").find('.delete_indicator').css('display','inline');
                var data = 'action=deleteImg&courseImgImgId=' + $(this).attr('id');
                $.post('function/course7.php',data,function(data){
                    $('.delete_indicator').css('display','none');
                    if(trim(data)=='success')
                    {
                        thisLi.parents("li").remove();
                        $('.courseImgInput').append('<p style="margin-bottom:10px;"><input name="courseImgImgVar[]" type="file" class="input medium" id="courseImgImgVar" /></p>');
                        $('.submitImgBt').css('display','block');
                        $("#img_success_msg").html('ลบรูปเรียบร้อยแล้ว');
                        $("#img_success_msg").show('highlight',3000,function(){
                            $("#img_success_msg").hide('highlight',3000);
                        });
                    }
                    else
                    {
                        $("#img_error_msg").html('ไม่สามารถลบรูปได้ กรุณาลองใหม่อีกครั้ง');
                        $("#img_error_msg").html(data);
                        $("#img_error_msg").show('highlight',3000,function(){
                            $("#img_error_msg").hide('highlight',3000);
                        });
                    }
                });
            }
        });
        
    });
    
    function saveOrder() {
        var serialStr = "";
        $("#courseImgList li span").each(function(i, elm) {
            serialStr += (i > 0 ? "|" : "") + $(elm).children("p").html();
        });
        
        $('.delete_indicator').css('display','inline');
        var order = 'action=orderImg&courseImgImgOrder='+serialStr;
        
        $.post('function/course7.php',order,function(data){
            $('.delete_indicator').css('display','none');
            if(trim(data)=='success')
            {
                $("#img_success_msg").html('เปลี่ยนตำแหน่งรูปภาพเรียบร้อยแล้ว');
                $("#img_success_msg").show('highlight',3000,function(){
                    $("#img_success_msg").hide('highlight',3000);
                });
            }
            else
            {
                $("#img_error_msg").html('ไม่สามารถเปลี่ยนตำแหน่งรูปภาพใหม่ได้ กรุณาลองใหม่อีกครั้ง');
                $("#img_error_msg").html(data);
                $("#img_error_msg").show('highlight',3000,function(){
                    $("#img_error_msg").hide('highlight',3000);
                });
            }
        });
    };
    
</script>

<h3 class="pageTitle">จัดการหน้าคอร์ส ภาษาญี่ปุ่นสำหรับนักเรียน</h3>

<div id="tabs" class="courseEdit">
    
    <ul>
        <li id="car_"><a href="#tabs-2" title="Add files">Images</a></li>
    </ul>
    
    <div id="tabs-2" class="courseImgFrm">
        <form name="courseImgFrm" id="courseImgFrm" action='function/course7.php' enctype='multipart/form-data'>
            <ul class="courseImgOrderlist" id="courseImgList">
                <?php echo $course_img; ?>
            </ul>
            <div class="clear"></div>
            <div class="courseImgInput">
                <?php echo $courseImgImgInput; ?>
            </div>
            <input type="hidden" name="action" value="uploadImg" />
            <input type="button" class="button submitImgBt hiddenEle" value="Submit" />
            &nbsp;<img src="images/ajax-loader.gif" class="ajax_load_img img_submit_indicator"/>
        </form>
        <div class="information canhide png_bg">ลากรูปภาพ เพื่อจัดตำแหน่ง<br />จำนวนรูปภาพ 3 รูป และขนาดรูปภาพแนะนำคือ 210x140 pixel</div>
        <div class="fail canhide png_bg ajax_msg" id="img_error_msg"></div>
        <div class="success canhide ajax_msg" id="img_success_msg"><p></p></div>
        <iframe name="ajaxIfrm" class="ajaxIfrm" ></iframe>
    </div>
    
    <iframe name="ajaxIfrm" class="ajaxIfrm" ></iframe>
</div>